/* eslint-disable react-refresh/only-export-components */
import React, { useRef } from "react";
import Navbar from "../../components/navbar";
import styles from "./css/psg.module.css";
import { Button, Toast } from "antd-mobile";
import { AddCircleOutline } from "antd-mobile-icons";
import PsgList from "./components/PsgList";
import { getPsg } from "../../api/info";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useDispatch } from "react-redux";
import { addArr } from "../../store/slice/orderSlice";

function Index() {
  let [sp] = useSearchParams();
  let PsgRef = useRef([]);
  let nav = useNavigate();
  let dis = useDispatch();
  const onChange = (arr) => {
    console.log(arr);
    PsgRef.current = arr;
  };
  const submit = () => {
    if (PsgRef.current.length === 0) return Toast.show("请选择乘车人！");
    dis(addArr(PsgRef.current));
    nav(-1);
  };
  return (
    <div className={styles.box}>
      <Navbar title="乘客列表" />
      <Button
        style={{ background: "#fff" }}
        block
        color="primary"
        fill="outline"
        onClick={() => nav("/add")}
      >
        <AddCircleOutline /> 新增乘客
      </Button>
      <PsgList onChange={onChange} />
      <div className={styles.btn}>
        {sp.get("mode") === "choose" && (
          <Button block color="primary" shape="rounded" onClick={submit}>
            提交
          </Button>
        )}
      </div>
    </div>
  );
}

export default Index;
export const loader = async () => {
  const { data: res } = await getPsg();
  return { list: res };
};
